<!--
 * @Descripttion: 全部欠薪诉求-全部
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-11 13:40:05
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-12-17 10:02:52
-->

<template>
  <div class="container">
    <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-form-item label="区域" class="row-padding-bottom">
          <el-cascader
            ref="manageArea"
            v-model="sendAreaId"
            :options="areasOptions"
            @change="getAreaId"
            clearable
            filterable
            :props="{ checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="投诉人" class="row-padding-bottom">
          <el-input
            v-model="filterField.complaintPerName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" class="row-padding-bottom">
          <el-input
            v-model="filterField.complaintPerTel"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="办理状态" class="row-padding-bottom">
          <el-select
            v-model="filterField.status"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in handleStateOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用人单位" class="row-padding-bottom">
          <el-input
            v-model="filterField.complaintCompanyName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收件日期" class="row-padding-bottom">
          <timeSelection
            @getStartTimeValue="getStartTimeValue"
            @getEndTimeValue="getEndTimeValue"
          ></timeSelection>
        </el-form-item>
        <el-form-item label="办结日期" class="row-padding-bottom">
          <timeSelection
            @getStartTimeValue="getStartTimeValueTwo"
            @getEndTimeValue="getEndTimeValueTwo"
          ></timeSelection>
        </el-form-item>
        <el-form-item label="是否延期" class="row-padding-bottom">
          <el-select
            v-model="filterField.isDelay"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in isDelayOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重复号码" class="row-padding-bottom">
          <el-select
            v-model="filterField.isRepeatTel"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in isRepeat"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重复诉求" class="row-padding-bottom">
          <el-select
            v-model="filterField.isRepeatNum"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in isRepeat"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号" class="row-padding-bottom">
          <el-input
            v-model="filterField.numId"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="案件类型" class="row-padding-bottom">
          <el-select
            v-model="filterField.caseType"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in caseTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchList"
            class="commonBtn"
          ></el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="tableList">
      <el-row class="table-header">
        <el-col :span="12" style="text-align: left">
          <span>查询表格</span>
        </el-col>
        <el-col :span="12" class="table-btn">
          <el-button
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icondaoru"
            @click="batchImport"
          >
            <span class="opetareText">批量导入</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut bzjAddJc"
            icon="icon iconfont icondaochu"
            @click="getExportList"
          >
            <span class="opetareText">导出</span>
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column prop="numId" label="编号"></el-table-column>
        <el-table-column
          prop="createTime"
          label="专线收件时间"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="repeatTelDesc"
          label="号码标记"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="caseTypeStr"
          label="案件类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="repeatNumDesc"
          label="诉求标记"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="countyName"
          label="区县"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="streetName"
          label="街道"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="complaintContent"
          label="欠薪诉求"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ getSubStringSum(scope.row.complaintContent, 25) }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="complaintPerName"
          label="投诉人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="complaintPerTel"
          label="联系电话"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="complaintCompanyName"
          label="用人单位"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="progressNewTime"
          label="最近办理进展"
          align="center"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="complaintEndDate"
          label="截止完成时间"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="isDelay"
          label="是否延期"
          align="center"
          :formatter="formatIsDelay"
        ></el-table-column>
        <el-table-column
          prop="complaintSource"
          label="渠道来源"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="complaintManagerNames"
          label="办理责任人"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="办理状态"
          align="center"
          :formatter="formatStatus"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="toEdit(scope.$index, scope.row)"
              >编辑</el-link
            >
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关数据"></emptyTable>
        </div>
      </el-table>
      <paginationWH
        ref="pagination"
        @getList="getTableListData"
        :filterField="filterField"
        :requestUrl="requestUrl"
        @getpageNo="getpageNo"
        @getpageSize="getpageSize"
      ></paginationWH>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'allUnpaidComplaintQy',
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rbp/list',
      date: [],
      //搜索条件
      filterField: {
        sendAreaId: '', //区域
        complaintPerName: '', //投诉人
        complaintPerTel: '', //联系电话
        status: '', //办理状态
        complaintCompanyName: '', //用人单位
        createTimeStart: '', //收件起始日期
        createTimeEnd: '', //收件结束日期
        overDateStart: '', //办结起始日期
        overDateEnd: '', //办结结束日期
        isDelay: '', //是否延期（0：否，1：是）
        isRepeatTel: '', //是否重复号码（0：否，1：是）
        isRepeatNum: '', //是否重复诉求（0：否，1：是）
        numId: '', //编号
        caseType: '',
        isPerfect: '', //是否完善
        isTodayNoPro: 0, //今日未跟进
        isToday: 0, //是否今日新增
        isMine: 0, //是否我负责的诉求
        pageNo: 1, //页码
        pageSize: 20, //每页条数
      },
      handleStateOptions: [
        {
          code: 2,
          name: '办理中',
        },
        {
          code: 3,
          name: '待进一步办理',
        },
        {
          code: 1,
          name: '已办结',
        },
      ],
      isDelayOptions: [
        {
          code: '1',
          name: '是',
        },
        {
          code: '0',
          name: '否',
        },
      ],
      isRepeat: [
        {
          code: '1',
          name: '重复',
        },
        {
          code: '0',
          name: '非重复',
        },
      ],
      caseTypeList: [],
    }
  },
  computed: { ...mapState(['areasOptions']) },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getTypeList()
  },
  watch: {
    type(newVal, oldVal) {
      if (newVal == 'all') {
        this.$refs.pagination.getTableListData()
      }
    },
  },
  methods: {
    /**
     * @description: 导出报表
     */
    getExportList() {
      const vm = this
      let sendAreaId = vm.filterField.sendAreaId //区域
      let complaintPerName = vm.filterField.complaintPerName //投诉人
      let complaintPerTel = vm.filterField.complaintPerTel //联系电话
      let status = vm.filterField.status //办理状态
      let complaintCompanyName = vm.filterField.complaintCompanyName //用人单位
      let createTimeStart = vm.filterField.createTimeStart //收件起始日期
      let createTimeEnd = vm.filterField.createTimeEnd //收件结束日期
      let overDateStart = vm.filterField.overDateStart //办结起始日期
      let overDateEnd = vm.filterField.overDateEnd //办结结束日期
      let isDelay = vm.filterField.isDelay //是否延期（0：否，1：是）
      let isRepeatTel = vm.filterField.isRepeatTel //是否重复号码（0：否，1：是）
      let isRepeatNum = vm.filterField.isRepeatNum //是否重复诉求（0：否，1：是）
      let numId = vm.filterField.numId //编号
      let isPerfect = '' //是否完善
      let isTodayNoPro = 0 //今日未跟进
      let isToday = 0 //是否今日新增
      let isMine = 0 //是否我负责的诉求
      let pageNo = 1 //页码
      let pageSize = 20 //每页条数
      window.location.href =
        common.commonApi +
        'api-r/rbp/export?sendAreaId=' +
        sendAreaId +
        '&complaintPerName=' +
        complaintPerName +
        '&complaintPerTel=' +
        complaintPerTel +
        '&status=' +
        status +
        '&complaintCompanyName=' +
        complaintCompanyName +
        '&createTimeStart=' +
        createTimeStart +
        '&createTimeEnd=' +
        createTimeEnd +
        '&overDateStart=' +
        overDateStart +
        '&overDateEnd=' +
        overDateEnd +
        '&isDelay=' +
        isDelay +
        '&isRepeatTel=' +
        isRepeatTel +
        '&isRepeatNum=' +
        isRepeatNum +
        '&numId=' +
        numId +
        '&isPerfect=' +
        isPerfect +
        '&isTodayNoPro=' +
        isTodayNoPro +
        '&isToday=' +
        isToday +
        '&isMine=' +
        isMine +
        '&caseType=' +
        vm.filterField.caseType +
        '&pageNo=' +
        pageNo +
        '&pageSize=' +
        pageSize +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    /**
     * @description: 格式化办理状态
     */
    formatStatus(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.status) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化是否延期
     */
    formatIsDelay(row, column) {
      for (var i = 0; i < this.isDelayOptions.length; i++) {
        if (this.isDelayOptions[i].code == row.isDelay) {
          return this.isDelayOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化最近办理进展
     */
    formatProgressNewTime(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.progressNewTime) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 新增欠薪诉求
     */
    addDeclare() {
      this.$router.push('/home/unpaidComplaint/newBackPayDemands')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 获取收件起始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createTimeStart = val
      } else {
        this.filterField.createTimeStart = ''
      }
    },
    /**
     * @description: 获取收件结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createTimeEnd = val
      } else {
        this.filterField.createTimeEnd = ''
      }
    },
    /**
     * @description: 获取办结起始日期
     * @param {*} val
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateStart = val
      } else {
        this.filterField.overDateStart = ''
      }
    },
    /**
     * @description: 获取办结结束日期
     * @param {*} val
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateEnd = val
      } else {
        this.filterField.overDateEnd = ''
      }
    },
    getpageSize(val) {
      this.filterField.pageSize = val
    },
    getpageNo(val) {
      this.filterField.pageNo = val
    },
    /**
     * @description: 获取全部欠薪诉求
     * @param {*} data
     */
    getTableListData(data) {
      let totalCount
      this.tableList = data.results
      totalCount = data.totalCount
      this.$emit('getTotalCount', totalCount)
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    /**
     * @description: 搜索欠薪诉求
     */
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    /**
     * @description: 欠薪诉求编辑
     * @param {*} index
     * @param {*} row
     */
    toEdit(index, row) {
      this.$router.push({
        path: '/home/unpaidComplaint/caseDetail',
        query: { id: row.id, type: 'area' },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 删除欠薪诉求
     * @param {*} index
     * @param {*} row
     */
    onDel(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delAllocatedSet(id)
        })
        .catch(() => {})
    },
    delAllocatedSet(id) {
      this.axios({
        method: 'post',
        url: 'api-r/rbp/delete',
        data: {
          rightsAppealId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var sendAreaId = this.sendAreaId[this.sendAreaId.length - 1]
      this.filterField.sendAreaId = sendAreaId
    },
    getTypeList() {
      this.axios({
        method: 'post',
        data: { type: 'WH_CASE_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.caseTypeList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    batchImport() {
      this.$router.push({
        path: '/home/unpaidComplaint/whBatchImportCase',
        namr: 'whBatchImportCase',
        query: {
          mark: 'jurisdictionsPayDemands',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/jurisdictionsPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
.container {
  padding-top: 24px;
}
.tableList {
  border-top: 10px solid #f5f7fa;
  padding: 20px 24px;
}
.table-header {
  width: 100%;
  font-size: 16px;
  color: #333333;
  padding: 20px 0px;
}
.table-btn {
  widows: 100%;
  height: 100%;
  text-align: right;
}
</style>
